<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<script src="../js/jquery.min.js"></script>
		<script src="../js/layui/layui.js"></script>
		<script src="../js/common.js"></script>
	</head>

	<body>
		<p _title="模拟模拟&#10;模拟" style="color: red;display: inline-block;">模拟title</p>
		<br />
		<label><input type="radio" name="x" disabled/>禁选</label>
		<label><input type="radio" name="x"/>可选</label>
		<span><input type="radio" name="x"/>可选</span>
		<label><input  type="checkbox" name="y" disabled/>禁选</label>
		<label><input type="checkbox" name="y"/>可选</label>
		<span><input type="checkbox" name="y" />可选</span>
		<label><input type="checkbox" name="y" checked/>选中</label>
		<br /><br />
		<input type="number" step="1" max="10" min="1" />
		<br /><br />
		<input id="date1" type="date" _type="date" value="2018-05-14" min="2018-05-10" max="2018-05-20" onchange="layer.msg(this.value)" />
		<br /><br />
		<input type="date" _type="date" config='{value:"2018-05-14",done:function(value, date, endDate){layer.msg(value, date, endDate)}}' />
		<br /><br /> 开始结束:
		<br />
		<input id="start-1" type="date" _type="date" placeholder="开始时间" end="#end-1" /> --
		<input id="end-1" type="date" _type="date" placeholder="结束时间" start="#start-1" />
		<button id="btn6">置空时间组</button>
		<br /><br />
		<div>
			下拉按钮组:
			<select data-type="button-group" style="width: 140px;">
				<option>下拉按钮组</option>
				<option onclick="layer.msg('功能一')">功能一</option>
				<option onclick="layer.msg('功能二')">功能二</option>
			</select>
		</div>
		<br />
		<div>
			<form id="form1">
				搜索选择框:
				<select data-type="search" style="width: 140px;" onchange="console.log(this.value)">
					<option disabled></option>
					<option value="01" selected onclick="layer.msg('功能一')">功能1</option>
					<option value="02" onclick="layer.msg('功能二')">功能2</option>
					<option value="03">功能3</option>
					<option value="04">功能4</option>
					<option value="05">功能5</option>
					<option value="06">功能6</option>
					<option value="07">功能7</option>
					<option value="08">功能8</option>
					<option value="09">功能9</option>
					<option value="10">功能10</option>
					<option value="11">功能11</option>
					<option value="12">功能12</option>
				</select>
				<br /><br /> 搜索选择框(自由型):
				<select data-type="search" data-search="auto" style="width: 140px;" onchange="console.log(this.value)">
					<option disabled></option>
					<option value="01" selected onclick="layer.msg('功能一')">功能1</option>
					<option value="02" onclick="layer.msg('功能二')">功能2</option>
					<option value="03">功能3</option>
					<option value="04">功能4</option>
					<option value="05">功能5</option>
					<option value="06">功能6</option>
					<option value="07">功能7</option>
					<option value="08">功能8</option>
					<option value="09">功能9</option>
					<option value="10">功能10</option>
					<option value="11">功能11</option>
					<option value="12">功能12</option>
				</select>
				<br /><br /> 搜索选择框(input型):
				<input id="input-list" type="text" data-list="x1,x2,x3" oninput="layer.msg('值改变,ajax请求后台')" />
				<script type="text/javascript">
					setTimeout(function() {
						$('#input-list').attr('data-list', 'y1,y2,y3,y4');
					}, 2000);
				</script>
			</form>
		</div>
		<br />
		<select id="select1" style="width: 200px;" onchange="layer.msg('onchange')">
			<option selected disabled>请选择</option>
			<option>Volvo</option>
			<option value="02">Saab</option>
			<option value="03">Mercedes</option>
			<option value="04">Audi</option>
		</select>
		<br /><br />
		<select style="width: 200px;" onchange="layer.msg('onchange')">
			<option selected disabled>请选择</option>
			<optgroup label="Swedish Cars">
				<option>Volvo</option>
				<option value="02">Saab</option>
			</optgroup>
			<optgroup label="German Cars">
				<option value="03">Mercedes</option>
				<option value="04">Audi</option>
			</optgroup>
		</select>
		<br />
		<div id="dom1"></div>
		<br />
		<div>
			<button id="btn1">动态添加radio/checkbox</button>
			<button id="btn2">动态添加date</button>
			<button id="btn3">动态修改date</button>
			<button id="btn4">动态添加select</button>
			<button id="btn5">动态修改select</button>
			<button id="btn7">动态修改select的val</button>
		</div>
		<script type="text/javascript">
			$(function() {
				$('#btn1').click(function() {
					$('#dom1').append('<br /><br /><label><input type="radio" name="x"/>可选</label><label><input type="checkbox" name="y"/>可选</label>');
				});
				$('#btn2').click(function() {
					$('#dom1').append('<br /><br /><input type="date" _type="date" min="2018-05-10" />');
				});
				$('#btn3').click(function() {
					$('#date1').css('border-color', '#f00').attr('min', '2018-05-15');
					alert('修改开始日期为2018-05-15');
				});
				$('#btn4').click(function() {
					$('#dom1').append('<br /><br /><select ><option disabled>禁选</option><option>163.net</option></select>');
				});
				$('#btn5').click(function() {
					$('#select1').append('<option value="5555">5555</option>');
					alert('添加<option value="5555">5555</option>');
				});
				$('#btn6').click(function() {
					$('#start-1').val('').attr('max', '2050-12-31');
					$('#end-1').val('').attr('min', '1970-1-1');
				});
				$('#btn7').click(function() {
					$('#select1').val('03');
				});
			});
		</script>
		<br /><br /><br /><br />
		<p>表单组按钮组</p><br />
		<form class="form-inline">
			<div class="form-group">
				<span class="form-label">产品类型</span>
				<select class="form-item" style="width: 160px;">
					<option value="">全部</option>
					<option value="05">银票银票银票银票</option>
					<option value="08">电票</option>
				</select>
				<span class="form-label">产品类型</span>
				<input class="form-item" type="text" />
			</div>
			<div class="form-group">
				<span class="form-label">产品类型</span>
				<select class="form-item">
					<option value="">全部</option>
					<option value="05">银票银票银票银票</option>
					<option value="08">电票</option>
				</select>
			</div>
		</form>
	</body>

</html>